<template>
	<view class="bg-gray" style="position: relative;height: 100%;"> 
		<view style="position: sticky;top:0rpx;" class="bg-gray">
			<my-tabs :list="list" @change='tabsChange'></my-tabs>
		</view>
		<view class="head">
			<view v-if="getHeadPotraitArr[tabIndex].HeadPotraitList.length>0" style="margin-top: 10rpx;" class="head_box bg-gray">
					<view class="img_box" @click="goImgBox(item.fileUrl)" v-for="(item,index) in getHeadPotraitArr[tabIndex].HeadPotraitList">
						<image :lazy-load='true' :src="item.thumbnailFileUrl" ></image>
					</view>
					<view  v-if="getHeadPotraitArr[tabIndex].HeadPotraitList.length%3 == 2" class="img_box">
						<image style="opacity: 0;" src="../../static/images/dqy.png" mode=""></image>
					</view>
			</view> 
			<view v-show="(getHeadPotraitArr[tabIndex].HeadPotraitList.length == 0 )&& showLogin" style="padding-top: 50rpx;">
				<u-empty text="暂无图片" mode="list"></u-empty>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" :duration='600' ></u-back-top>
	</view>
</template>

<script>
	import { haeadmixins } from "../mixin/head-bizhi.js"
	export default {
			mixins: [haeadmixins],
			data() {
				return {
					type:'头像',
					scrollTop: 0
				}
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
</script>

<style lang="scss" scoped>
.bg-gray{
	// min-height: 100%;
}
.head{
	min-height: calc(100vh - 64rpx);
}
.head_box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10rpx 20rpx;
}
.img_box{
	width: 224rpx;
	height: 224rpx;
	margin-bottom: 20rpx;
	// padding: 10rpx;	
	// margin-left: -10rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
